// 日历记事  单机数据存在浏览器本地存储

const rljs = defineComponent({
    components: {},
    props: [],
    emits: [],
    setup() {
        //[{date:'yyyy-MM-dd', item: ''}]
        let dateTodoArray = []
        const dateVlue = ref(new Date())
        const calendar = ref()
        const dateTodoList = ref(dateTodoArray)

        onMounted(() => {
            quickWebJs.getKeyValue("dateTodoArray", (res, err) => {
                if (res && res.status == 200) {
                    dateTodoList.value = res.data == null ? [] : res.data;
                } else {
                    if (err) {
                        ElMessage.info("数据加载异常")
                    } else {
                        ElMessage.info("数据初始化异常")
                    }
                }
            })
        })

        // 一个计算属性 ref
        const dayTodoList = computed(() => {
            let items = [];
            for (let i = 0; i < dateTodoList.value.length; i++) {
                if (dateTodoList.value[i].date == DateUtil.date2DateStr(dateVlue.value)) {
                    items.push(dateTodoList.value[i])
                }
            }
            return items;
        })

        function saveDayTodo(dayTodo) {
            quickWebJs.saveKeyValue("dateTodoArray", dateTodoList.value, (res, err) => {
                if (err) {
                    ElMessage.info("数据同步异常")
                }
            })
        }

        function deleteDayTodo(dayTodo) {
            ArrayUtil.deleteOne(dayTodoList.value, dayTodo)
            ArrayUtil.deleteOne(dateTodoList.value, dayTodo)
            quickWebJs.saveKeyValue("dateTodoArray", dateTodoList.value, (res, err) => {
                if (err) {
                    ElMessage.info("数据存储异常")
                }
            })
        }

        function addDayTodo() {
            const daytodo = {date: DateUtil.date2DateStr(dateVlue.value), item: ''}
            ArrayUtil.addOne(dayTodoList.value, daytodo)
            ArrayUtil.addOne(dateTodoList.value, daytodo)
        }

        const customHeaderContent1 = function () {
            return DateUtil.date2nlStr(dateVlue.value)
        }

        const customHeaderContent2 = function () {
            return DateUtil.date2DateStr(dateVlue.value)
        }

        const selectDate = (selectType) => {
            //selectType 是elementplus框架固定传值不要修改
            if (!calendar.value) return
            calendar.value.selectDate(selectType)
        }

        //yyyy-MM-dd
        const nongliri = function (date) {
            let datenlStr = DateUtil.date2nlStr(date);
            return datenlStr.substring(datenlStr.length - 2)
        }

        const jieqi = function (date) {
            return DateUtil.getNlJieQi(date);
        }

        const jiejiari = function (date) {
            let jjr = []
            let gljjr = DateUtil.getYlJieJiaRiName(date);
            if (gljjr != null && gljjr != "") {
                jjr.push(gljjr)
            }
            let glzjjr = DateUtil.getYlZJieJiaRiName(date);
            if (glzjjr != null && glzjjr != "") {
                jjr.push(glzjjr)
            }
            let nljjr = DateUtil.getNlJieJiaRiName(date);
            if (nljjr != null && nljjr != "") {
                jjr.push(nljjr)
            }
            return jjr.join(" | ")
        }

        const fileInput = ref();

        const openFileInput = function () {
            fileInput.value.click();
        }

        const handleFileChange = function (event) {
            const files = event.target.files;
            if (files.length > 0) {
                const file = files[0];
                quickWebJs.uploadEasyFile(file, null, (res, err) => {
                    if (res && res.status == 200) {
                        window.open(quickWebJs.getEasyFileUrl(res.data), '_blank');
                    } else {
                        if (err) {
                            ElMessage.info("文件数据加载异常")
                        } else {
                            ElMessage.info("文件数据初始化异常")
                        }
                    }
                })
            }
        }

        return {
            dateVlue,
            calendar,
            customHeaderContent1,
            customHeaderContent2,
            selectDate,
            nongliri,
            jiejiari,
            jieqi,
            dayTodoList,
            saveDayTodo,
            addDayTodo,
            deleteDayTodo,
            dateTodoList,
            fileInput,
            openFileInput,
            handleFileChange
        };
    },
    template: `
    <div>
        <el-calendar v-model="dateVlue"  ref="calendar">
            <template #header="{ date }">
                <span>{{ customHeaderContent1() }}</span>
                <span>{{ customHeaderContent2() }}</span>
                <el-button-group>
                <el-button size="small" @click="selectDate('prev-year')">
                  上一年
                </el-button>
                <el-button size="small" @click="selectDate('prev-month')">
                  上一月
                </el-button>
                <el-button size="small" @click="selectDate('today')">今天</el-button>
                <el-button size="small" @click="selectDate('next-month')">
                  下一月
                </el-button>
                <el-button size="small" @click="selectDate('next-year')">
                  下一年
                </el-button>
                </el-button-group>
            </template>

             <template #date-cell="{ data }" >
                <div :class="data.isSelected ? 'is-selected' : ''">
                    <el-row :gutter="1" style="height: 20px;">
                        <el-col :span="20" style="height: 20px">
                            <p style="font-size: 20px; margin-top: 1px;">
                                {{ data.day.split('-').slice(2).join('-') }}
                                {{ data.isSelected ? '✔️' : '' }}
                             </p>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1" style="height: 20px;">
                        <el-col :span="10" style="height: 10px">
                            <p style="font-size: 12px"> {{ nongliri(data.date) }} </p>
                        </el-col>
                        <el-col :span="10" style="height: 10px">
                            <p style="font-size: 12px; color: darkviolet"> {{ jieqi(data.date) }} </p>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1" style="height: 10px;">
                        <el-col :span="20" style="height: 10px">
                            <p style="font-size: 12px; color: red"> {{ jiejiari(data.date) }} </p>
                        </el-col>
                    </el-row>
                </div>
            </template>   
        </el-calendar>
        <li v-for="dayTodo in dayTodoList" style="margin-top: 10px; display: flex; align-items: flex-start;">
            <el-input v-model="dayTodo.item" style="width: 500px" placeholder="记点什么呢?" @change="saveDayTodo(dayTodo)" />
            <el-button type="danger" plain style="width: 40px;" @click="deleteDayTodo(dayTodo)">删除</el-button>
        </li>
        <el-button type="white" circle style="margin-top: 10px" @click="addDayTodo"><el-icon><CirclePlus /></el-icon></el-button>
        <input type="file" ref="fileInput" style="display: none;" @change="handleFileChange">
        <button @click="openFileInput">选择文件上传测试</button>
    </div>
    `
});